<script setup>

/**
 * @import libs
 */
import { ref } from 'vue'

/**
* @import pinia stores
*/

//pinia -> useIndexStaticMessStore
import { useIndexStaticMessStore } from '@/stores/index/indexStaticMess'

/**
 * @param activityStateBeforeOpen 热门活动状态 (未开放)
 * @param activityStateOpen 热门活动状态 (进行中)
 * @param activityStateClose 热门活动状态 (已结束)
 */
const { activityStateBeforeOpen, activityStateOpen, activityStateClose } = useIndexStaticMessStore()

//pinia -> useHomePageStore
import { useHomePageStore } from '@/stores/index/homePage.js'

/**
 * @function enterActivityButtonClick 进入活动按钮被点击
 */
const { enterActivityButtonClick } = useHomePageStore()

/**
 * props
 */
const props = defineProps({
    item: {
        type: Object,
        default: {}
    }
})

/**
 * 进入活动入口文字内容
 */
const enterActivityText = ref('进入活动')

/**
 * 进入活动按钮被点击事件
 * @param id 活动id
 * @returns {*}
 */
const enterActivityButtonClickEvent = (id) => {

    //参数有效性校验
    if (id === undefined) {
        console.error('id is undefined')
        return
    }

    //参数类型校验
    if (typeof id !== 'number') {
        console.error('id must be a number')
        return
    }

    enterActivityButtonClick(id)
}

</script>

<template>
    <div class="popular-activity">
        <div :class="['state-class', { 'popular-activity-active': item.state === activityStateOpen }]">{{ item.state }}
        </div>
        <div class="activity-image-class">
            <image class="activity-image-class" :src="item.imageUrl" mode="aspectFill" />
        </div>
        <div class="activity-info-class">
            <div class="activity-title-class">{{ item.title }}</div>
            <div class="activity-time-class">{{ item.time }}</div>
        </div>
        <div :class="['activity-enter-class', { 'activity-enter-active-class': item.state === activityStateOpen }]" @click.stop="enterActivityButtonClickEvent(item.id)">
            {{ enterActivityText }}
        </div>
    </div>
</template>

<style scoped>
.activity-enter-class {
    position: absolute;
    bottom: 15rpx;
    right: 40rpx;
    color: #fff;
    background-color: #d2d2d2;
    border-radius: 32rpx;
    font-size: 28rpx;
    font-family: serif;
    padding: 10rpx 20rpx;
}

.activity-enter-active-class {
    background-color: #f29d28;
}

.activity-title-class {
    color: #f5b254;
    font-size: 28rpx;
}

.activity-time-class {
    color: #f5b254;
    font-size: 24rpx;
    margin-right: -40rpx;
}

.activity-image-class {
    width: 550rpx;
    height: 300rpx;
    border-radius: 32rpx;
    margin: 0 auto;
    margin-top: 15rpx;
}


.popular-activity {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 32rpx;
    position: relative;
    margin-top: 40rpx;
    height: 460rpx;
}

.state-class {
    width: 100rpx;
    height: 40rpx;
    background-color: #d5d5d5;
    color: #fff;
    font-family: serif;
    border-radius: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25rpx;
    position: absolute;
    top: 20rpx;
    left: 40rpx;
}

.popular-activity-active {
    background-color: #f29d28;
}

.activity-info-class {
    width: 500rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 80rpx;
    left: 50rpx;
}
</style>